import { BasicColumn, FormSchema } from '@/components/Table';
import { useDictStoreWithOut } from '@/store/modules/dict';
import { h, ref } from 'vue';
import { Tag } from 'ant-design-vue';
import { getRandomColor } from '@/utils/common/customColor';

const useDict = useDictStoreWithOut();

const cloudIdOptions = useDict.getDict('1001');
const cloudTypeOption = (cloudId: string, cloudType: string) => {
  if (null !== cloudId) {
    const cloudTypeOpts = useDict.getDict(cloudId);
    for (const cloudTypeOpt of cloudTypeOpts) {
      if (cloudType === cloudTypeOpt.value) {
        return cloudTypeOpt.label;
      }
    }
  }
  return cloudType;
};

const cloudOptions = () => {
  const idOptions = useDict.getDict('1001');
  for (const id of idOptions) {
    id.children = useDict.getDict(id.value);
  }
  return idOptions;
};

export const cloudOptionsIfShow = ref(true);

export const searchFormSchema: FormSchema[] = [
  {
    field: 'cloudOptions',
    label: '云类型',
    component: 'Cascader',
    componentProps: {
      options: cloudOptions(),
    },
    colProps: { span: 8 },
    ifShow: cloudOptionsIfShow,
  },
  {
    field: 'scriptName',
    label: '脚本名称',
    component: 'Input',
    colProps: { span: 8 },
  },
  {
    field: 'scriptCode',
    label: '脚本编码',
    component: 'Input',
    colProps: { span: 8 },
  },
];

export const columns: BasicColumn[] = [
  {
    title: '脚本名称',
    dataIndex: 'scriptName',
    width: 120,
  },
  {
    title: '脚本编码',
    dataIndex: 'scriptCode',
    width: 120,
  },
  {
    title: '云资源',
    dataIndex: 'cloudId',
    width: 120,
    customRender: ({ record }) => {
      return h(
        Tag,
        {
          color: getRandomColor(),
        },
        () => {
          for (const cdo of cloudIdOptions) {
            if (cdo.value === record.cloudId) {
              return cdo.label;
            }
          }
          return record.cloudId;
        },
      );
    },
  },
  {
    title: '云资源类型',
    dataIndex: 'cloudType',
    width: 120,
    customRender: ({ record }) => {
      return h(
        Tag,
        {
          color: getRandomColor(),
        },
        () => cloudTypeOption(record.cloudId, record.cloudType),
      );
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 180,
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'scriptId',
    label: '脚本Id',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'scriptName',
    label: '脚本名称',
    required: true,
    component: 'Input',
  },
  {
    field: 'scriptCode',
    label: '脚本编码',
    required: true,
    component: 'Input',
  },
  {
    field: 'cloudOptions',
    label: '云资源类型',
    component: 'Cascader',
    componentProps: {
      options: cloudOptions(),
    },
    ifShow: ({ values }) => cloudIsEnable(values.typeUse),
  },
  {
    label: '备注',
    field: 'remark',
    component: 'InputTextArea',
  },
  {
    field: 'scriptType',
    label: '脚本类型',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'scriptUse',
    label: '脚本用途',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'scriptType',
    label: '脚本类型',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'cloudId',
    label: '云资源Id',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'cloudType',
    label: '云资源类型',
    component: 'Input',
    ifShow: false,
  },
  {
    field: 'typeUse',
    label: '类型+用途聚合字段',
    component: 'Input',
    ifShow: false,
  },
];

const cloudIsEnable = (typeUse: string) => {
  console.info('typeUse', typeUse);
  if (undefined === typeUse) {
    return false;
  }
  return !typeUse.includes('public');
};
